<template>
    <div class="order-container">
      <div class="order-header">
        <h2>我的订单</h2>
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <el-tab-pane label="全部订单" name="all"></el-tab-pane>
          <el-tab-pane label="待付款" name="unpaid"></el-tab-pane>
          <el-tab-pane label="待发货" name="unsent"></el-tab-pane>
          <el-tab-pane label="待收货" name="shipped"></el-tab-pane>
          <el-tab-pane label="已完成" name="completed"></el-tab-pane>
        </el-tabs>
      </div>
  
      <div class="order-list">
        <div v-for="order in filteredOrders" :key="order.id" class="order-card">
          <div class="order-info">
            <div class="order-meta">
              <span class="order-no">订单编号: {{ order.orderNo }}</span>
              <span class="order-date">{{ order.createTime }}</span>
              <el-tag :type="getStatusTagType(order.status)" size="small">
                {{ getStatusText(order.status) }}
              </el-tag>
            </div>
            <div class="order-content">
              <div class="product-list">
                <div v-for="product in order.products" :key="product.id" class="product-item">
                  <el-image 
                    :src="product.image" 
                    fit="cover"
                    class="product-image"
                    :preview-src-list="[product.image]">
                    <template #error>
                      <div class="image-error">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                  <div class="product-info">
                    <div class="product-name">{{ product.name }}</div>
                    <div class="product-spec">{{ product.spec }}</div>
                    <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
                    <div class="product-quantity">x{{ product.quantity }}</div>
                  </div>
                </div>
              </div>
              <div class="order-summary">
                <div class="total-amount">
                  共 {{ order.products.length }} 件商品 合计:
                  <span class="amount">¥{{ order.totalAmount.toFixed(2) }}</span>
                </div>
                <div class="order-actions">
                  <el-button 
                    v-if="order.status === 'unpaid'" 
                    type="primary" 
                    size="small"
                    @click="handlePay(order)">
                    立即付款
                  </el-button>
                  <el-button 
                    v-if="order.status === 'shipped'" 
                    type="success" 
                    size="small"
                    @click="handleConfirm(order)">
                    确认收货
                  </el-button>
                  <el-button 
                    v-if="order.status === 'completed'" 
                    type="info" 
                    size="small"
                    @click="handleDelete(order)">
                    删除订单
                  </el-button>
                  <el-button 
                    v-if="order.status !== 'completed'" 
                    plain 
                    size="small"
                    @click="handleCancel(order)">
                    取消订单
                  </el-button>
                  <el-button 
                    type="text" 
                    size="small"
                    @click="viewDetail(order)">
                    查看详情
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div v-if="filteredOrders.length === 0" class="empty-orders">
          <el-empty description="暂无订单数据"></el-empty>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { Picture } from '@element-plus/icons-vue'
  
  // 模拟订单数据
  const orders = ref([
    {
      id: '10001',
      orderNo: 'DD202306011234',
      createTime: '2023-06-01 14:30:22',
      status: 'unpaid',
      totalAmount: 12998.00,
      products: [
        {
          id: 'p1001',
          name: 'iPhone 14 Pro Max',
          spec: '深空黑 256GB',
          price: 9999.00,
          quantity: 1,
          image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/197903/16/22070/112950/6246b0d2Ee9a0a330/0d0b7c0e4c8f1a3a.jpg'
        },
        {
          id: 'p1002',
          name: 'Apple Watch Series 8',
          spec: 'GPS款 45mm 午夜色',
          price: 2999.00,
          quantity: 1,
          image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/220859/21/15143/66853/6246b0d3Ea5c0eba1/6b5e0c8e4c8f1a3a.jpg'
        }
      ]
    },
    {
      id: '10002',
      orderNo: 'DD202306021235',
      createTime: '2023-06-02 09:15:33',
      status: 'unsent',
      totalAmount: 8999.00,
      products: [
        {
          id: 'p2001',
          name: 'MacBook Air M2',
          spec: '13.6英寸 8核 16G 256G',
          price: 8999.00,
          quantity: 1,
          image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/197903/16/22070/112950/6246b0d2Ee9a0a330/0d0b7c0e4c8f1a3a.jpg'
        }
      ]
    },
    {
      id: '10003',
      orderNo: 'DD202306031236',
      createTime: '2023-06-03 16:45:12',
      status: 'shipped',
      totalAmount: 5999.00,
      products: [
        {
          id: 'p3001',
          name: 'iPad Pro 2022',
          spec: '11英寸 128G WLAN版',
          price: 5999.00,
          quantity: 1,
          image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/197903/16/22070/112950/6246b0d2Ee9a0a330/0d0b7c0e4c8f1a3a.jpg'
        }
      ]
    },
    {
      id: '10004',
      orderNo: 'DD202306041237',
      createTime: '2023-06-04 11:20:45',
      status: 'completed',
      totalAmount: 1999.00,
      products: [
        {
          id: 'p4001',
          name: 'AirPods Pro 2',
          spec: '第二代 主动降噪',
          price: 1999.00,
          quantity: 1,
          image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/197903/16/22070/112950/6246b0d2Ee9a0a330/0d0b7c0e4c8f1a3a.jpg'
        }
      ]
    }
  ])
  
  const activeTab = ref('all')
  
  // 根据标签过滤订单
  const filteredOrders = computed(() => {
    if (activeTab.value === 'all') {
      return orders.value
    }
    return orders.value.filter(order => order.status === activeTab.value)
  })
  
  // 获取订单状态标签类型
  const getStatusTagType = (status) => {
    const map = {
      unpaid: 'danger',
      unsent: 'warning',
      shipped: 'primary',
      completed: 'success'
    }
    return map[status] || ''
  }
  
  // 获取订单状态文本
  const getStatusText = (status) => {
    const map = {
      unpaid: '待付款',
      unsent: '待发货',
      shipped: '待收货',
      completed: '已完成'
    }
    return map[status] || ''
  }
  
  // 标签切换
  const handleTabChange = (tabName) => {
    activeTab.value = tabName
  }
  
  // 立即付款
  const handlePay = (order) => {
    console.log('付款订单:', order)
    // 这里调用支付接口
    ElMessage.success('跳转到支付页面')
  }
  
  // 确认收货
  const handleConfirm = (order) => {
    console.log('确认收货:', order)
    // 这里调用确认收货接口
    order.status = 'completed'
    ElMessage.success('已确认收货')
  }
  
  // 取消订单
  const handleCancel = (order) => {
    console.log('取消订单:', order)
    // 这里调用取消订单接口
    orders.value = orders.value.filter(item => item.id !== order.id)
    ElMessage.success('订单已取消')
  }
  
  // 删除订单
  const handleDelete = (order) => {
    console.log('删除订单:', order)
    // 这里调用删除订单接口
    orders.value = orders.value.filter(item => item.id !== order.id)
    ElMessage.success('订单已删除')
  }
  
  // 查看详情
  const viewDetail = (order) => {
    console.log('查看订单详情:', order)
    // 这里跳转到订单详情页
    ElMessage.success('跳转到订单详情')
  }
  </script>
  
  <style scoped>
  .order-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .order-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
  }
  
  .order-header h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
  }
  
  .order-list {
    margin-top: 20px;
  }
  
  .order-card {
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s;
  }
  
  .order-card:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .order-meta {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background-color: #fafafa;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .order-no {
    flex: 1;
    font-size: 14px;
    color: #666;
  }
  
  .order-date {
    margin: 0 20px;
    font-size: 14px;
    color: #999;
  }
  
  .order-content {
    display: flex;
    padding: 20px;
  }
  
  .product-list {
    flex: 1;
  }
  
  .product-item {
    display: flex;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #f0f0f0;
  }
  
  .product-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  
  .product-image {
    width: 80px;
    height: 80px;
    margin-right: 15px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .image-error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
  }
  
  .product-info {
    flex: 1;
  }
  
  .product-name {
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
  }
  
  .product-spec {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
  }
  
  .product-price {
    font-size: 16px;
    color: #f56c6c;
    font-weight: bold;
  }
  
  .product-quantity {
    font-size: 12px;
    color: #999;
    text-align: right;
  }
  
  .order-summary {
    width: 300px;
    padding-left: 20px;
    border-left: 1px solid #f0f0f0;
    text-align: right;
  }
  
  .total-amount {
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
  }
  
  .amount {
    font-size: 18px;
    color: #f56c6c;
    font-weight: bold;
  }
  
  .order-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .empty-orders {
    padding: 50px 0;
    text-align: center;
  }
  </style>